<template>
  <div>

    <el-row :gutter="5">
      <el-col :span="4"
              v-for="(item, index) in rows"
              :key="index">
        <el-card :body-style="{ padding: '0px' }"
                 shadow="always">
          <el-popover placement="right-end"
                      width="190"
                      v-model="item.visible">
            <p>操作图片</p>
            <div>
              <el-button size="mini"
                         type="danger"
                         @click="item.visible = false">删除</el-button>
              <el-button type="primary"
                         size="mini"
                         @click="showImg(item)">查看大图</el-button>
            </div>
            <img class="img"
                 slot="reference"
                 :src="item.img">
          </el-popover>
        </el-card>
      </el-col>
    </el-row>

    <Page :pageOpts="pageOpts"
          @change-page="changePage" />
    <ImgDialog :imgContent="imgContent"
               v-model="dialogVisible" />
  </div>
</template>
<script>
import { getZoneList } from "@/api/zone";
import Page from "./page";
import ImgDialog from "./imgDialog";
export default {
  components: {
    Page,
    ImgDialog
  },
  created() {
    this.getZoneList();
  },
  data() {
    return {
      dialogVisible: false,
      rows: [],
      imgContent: { img: "" },
      pageOpts: {
        count: 0,
        current: 1,
        pageSize: 18
      }
    };
  },
  methods: {
    async getZoneList() {
      const { current, rows, count, pageSize } = await getZoneList(
        this.pageOpts
      );
      this.rows = rows.map(_ => ({ ..._, visible: false }));
      this.pageOpts = {
        current,
        count,
        pageSize
      };
    },
    changePage(current) {
      this.pageOpts.current = current;
      this.getZoneList();
    },
    showImg(imgContent) {
      this.imgContent = imgContent;
      this.dialogVisible = !this.dialogVisible;
    }
  }
};
</script>
<style lang="scss" scoped>
.img {
  width: 150px;
  height: 150px;
  cursor: pointer;
}
.footer {
  padding: 5px;
  text-align: right;
}
</style>
